<?php
require '../inc/basics.php';
hasPermission('accountManager','gebruikers');
?>

<script>
		function enable_inputs(){
			$(".user_details :input").each(function(){
				$(this).attr('disabled', false);
			});
		}
			
		function disable_inputs(){
			$(".user_details :input").each(function(){
				$(this).attr('disabled', true);
			});
		}

		function clear_inputs(){
			$(".user_details :input").each(function(){
				$(this).val('');
				$('#input_user_password').removeClass('ok');
				$('#input_user_password2').removeClass('ok');
				$("#input_user_active").attr('checked', true).attr('disabled', false);
				$("#span_user_last_login").text('');
			});
		}
	
		//select user and show details
		$("#select_user_list li").on('click', function() {
			$(this).addClass("ui-selected").siblings().removeClass("ui-selected");
			$("ul .ui-selected").each(function () {
				//get user details in detail pane
				var active;
				$.getJSON("/a/f=adminUserDetails", {id : $(this).attr('id')}, function(data){
					$("#input_user_name").val(data.name);
					$("#input_user_surname").val(data.surname);
					$("#input_user_email").val(data.email);
					active = (data.active == 1) ? true : false;
					$("#input_user_active").attr('checked', active);
					$("#span_user_last_login").text(data.last_login);
				});					
				//get assigned roles in group pane
				$.getJSON("/a/f=adminAssignedRoles", {id : $(this).attr('id')}, function(data){
					$("#select_user_groups").empty();
					$.each(data, function(key, val) {
						$("#select_user_groups").append("<li>"+val.name+"</li>\n");
					});
						
				});
				//enable edit button
				$(":button#edit").button( "option", "disabled", false );
			});				
		});

		//remove user
		$(":button#remove").click(function(){
			$("#select_user_list .ui-selected").each(function () {
				$( "<div></div>" )
				.html("<p><span class=\"ui-icon ui-icon-alert\" style=\"float:left; margin:0 7px 20px 0;\"></span>Weet je zeker dat je deze gebruiker wilt verwijderen?</p>")
				.dialog({
					resizable: false,
					modal: true,
					width: 280,
					dialogClass: 'dialog_no_title_bar',
					buttons: {
						"Ok": function() {
							$.getJSON("/a/f=adminDeleteUser", {id : $("#select_user_list .ui-selected").attr('id')}, function(data){
								if (data.succes == true){
									$("#select_user_list .ui-selected").remove();
									//clear all inputs
									$("#input_user_name").val('');
									$("#input_user_surname").val('');
									$("#input_user_email").val('');
									$("#input_user_active").attr('checked', false);
									$("#span_user_last_login").text('');
									$(":button#save").button( "option", "disabled", true );
									$(":button#edit").button( "option", "disabled", true );
								}
							});
							$( this ).dialog( "close" );
						},
						Cancel: function() {
							$( this ).dialog( "close" );
						}
					}
				});
			});
			return false;
		});
	
		//add user
		$(":button#add").click(function(){
			$("#button_function").val('add');
			//clear all inputs and enable them
			$("#input_user_name").val('').attr('disabled', false).focus();
			$("#input_user_surname").val('').attr('disabled', false);
			$("#input_user_email").val('').attr('disabled', false);
			$("#input_user_active").attr('checked', true).attr('disabled', false);
			$("#span_user_last_login").text('');
			enable_inputs();
			$(":button#edit").button( "option", "disabled", true );
			return false;
		});

		//edit user
		$(":button#edit").toggle(function(){
			$(this).addClass("ui-state-focus");
			$("#button_function").val('edit');
			enable_inputs();				
			$("#input_user_name").focus();
			$(":button#save").button( "option", "disabled", false );
			return false;
		},function(){
			$(":button#edit").removeClass("ui-state-focus");
			$("#button_function").val(null);
			$('.user_details :input').removeClass('ok').removeClass('error');
			$('#input_user_password').val('');
			$('#input_user_password2').val('');
			disable_inputs();
			return false;
		});	

		//validate email input
		$('#input_user_email').keyup(function(e) {
			var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
			$(":button#save").button( "option", "disabled", true );
			if (regex.test($(this).val())) {
				$(this).removeClass('error').addClass('ok');
				$(":button#save").button( "option", "disabled", false );
			}else{
				$(this).removeClass('ok').addClass('error');
					
			}
			return true;
		});

		//validate password inputs
		$('#input_user_password').keyup(function(e) {
			var regex = new RegExp("^.*(?=.{6,})(?=.*[0-9])(?=.*[A-z]).*$", "g");
			$(":button#save").button( "option", "disabled", true );
			if (regex.test($(this).val())) {
				$(this).removeClass('error').addClass('ok');
			}else{
				$(this).removeClass('ok').addClass('error');
					
			}
			return true;
		});
		$('#input_user_password2').keyup(function(e) {
			var regex = new RegExp("^.*(?=.{6,})(?=.*[0-9])(?=.*[A-z]).*$", "g");
			if (regex.test($(this).val()) && ($(this).val() == $('#input_user_password').val())) {
				$(this).removeClass('error').addClass('ok');
				$(":button#save").button( "option", "disabled", false );
			}else{
				$(this).removeClass('ok').addClass('error');
				$(":button#save").button( "option", "disabled", true );
			}
			return true;
		});
	
		//save user (after edit or new)
		$(":button#save").click(function(){
			//save new user
			if($("#button_function").val()=='add'){
				active = $("#input_user_active").is(':checked') ? 1 : 0;
				$.getJSON("/a/f=adminAddUser", {
					name :		$("#input_user_name").val(),
					surname :	$("#input_user_surname").val(),
					email :		$("#input_user_email").val(),
					password :	$("#input_user_password2").val(),
					active :	active
				},
				function(data){
					if(data.succes == true){
						$("#select_user_list").append("<li id="+data.id+">"+data.name+" "+data.surname+"</li>\n");
						clear_inputs();
						disable_inputs();
						$(":button#save").button( "option", "disabled", true );
						$(":button#edit").button( "option", "disabled", true );
					} 
				}).error(function(data){$('<div></div>').html("<p>"+data.responseText+"</p>").dialog({width: 1000}); });
				$("#button_function").val(null);
				return false;				
			}//save user after edit
			else if($("#button_function").val()=='edit'){
				id = $("#select_user_list .ui-selected").attr('id');
				active = $("#input_user_active").is(':checked') ? 1 : 0;
				name = $("#input_user_name").val();
				surname = $("#input_user_surname").val();
				$.getJSON("/a/f=adminSaveUserDetails", {
					id :		id,
					name :		name,
					surname :	surname,
					email :		$("#input_user_email").val(),
					password :	$("#input_user_password2").val(),
					active :	active
				},
				function(data){
					if (data.succes == true){
						$("#select_user_list .ui-selected").replaceWith("<li id="+id+">"+name+" "+surname+"</li>\n");
						disable_inputs();
						$(".user_details :input").each(function(){
							$(this).removeClass('ok');
						});
						$(":button#save").button( "option", "disabled", true );							
					}						
				})
				.error(function(data){$('<div></div>').html("<p>"+data.responseText+"</p>").dialog({width: 1000}); });
				$("#button_function").val(null);
				return false;
			}
		});
</script>
<div class="inner-center">
	<form action="">
		<table class="user_accounts" >
			<tr><th colspan="3">Users</th><th colspan="2">Member of groups</th><th>User details</th></tr>
			<tr>
				<td colspan="2">
					<ul id="select_user_list" class="selectable">
						<?php
						$administrator = Administrator::getInstance();
						$users = $administrator->listUsers();
						foreach ($users as $user) {
							echo "<li id=" . $user['id'] . ">" . htmlspecialchars($user['name']) . " " . htmlspecialchars($user['surname']) . "</li>\n";
						}
						?>
					</ul>
				</td>
				<td width="30"></td>
				<td>
					<ul id="select_user_groups" class="selectable"></ul>
				</td>
				<td width="30"></td>
				<td class="user_details">
					<table>
						<tr><td width="150">Naam</td><td><input id="input_user_name" type="text" disabled></td></tr>
						<tr><td>Achternaam</td><td><input id="input_user_surname" type="text" disabled></td></tr>
						<tr><td>E-mail</td><td><input id="input_user_email" type="text" disabled></td></tr>
						<tr><td>Password</td><td><input id="input_user_password" type="password" disabled></td></tr>
						<tr><td>Password</td><td><input id="input_user_password2" type="password" disabled></td></tr>
						<tr><td>Active</td><td><input id="input_user_active" type="checkbox" disabled></td></tr>
						<tr><td>Last login</td><td><span id="span_user_last_login"></span></td></tr>

					</table>
				</td>
			</tr>

			<tr>
				<td><button id="add">Add</button></td><td align="right"><button id="remove">Remove</button></td>
				<td colspan="3"></td><td colspan="2">
					<button id="edit" disabled>Edit</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button id="save" disabled>Save</button><td>
			</tr>

		</table>
		<input id="button_function" type="hidden"></input>
	</form>
	<div id="error"></div>
	<div id="dialog_confirm_delete">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
			Weet je zeker dat je deze gebruiker wilt verwijderen?</p>
	</div>
</div>